﻿<!DOCTYPE html>

<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script type="text/javascript" src="http://api.map.baidu.com/api?type=webgl&v=1.0&ak=uPBWN5j3HdwY5wofjzWP2eY58PgXAazl"></script>
    <script src="js/jquery-1.12.1.min.js"></script>
    <style>
        html, body, #container {
            width: 100%;
            height: 100%;
            overflow: hidden;
            margin: 0;
            padding: 0
        }
    </style>

</head>
<body>
    <div id="result"></div>
    <div id="container"></div>
    <script>

     

      


        //出行规划
        var map = new BMapGL.Map("container");
        map.centerAndZoom(new BMapGL.Point(121.187484, 31.869261), 12);

        //加载控件
        map.enableScrollWheelZoom(true); //开启鼠标滚轮 地图可以进行放大 缩小
        map.addControl(new BMapGL.ScaleControl()); // 添加比例尺控件 左下角显示
        map.addControl(new BMapGL.ZoomControl());// 添加缩放控件 右下角显示
        map.addControl(new BMapGL.CityListControl());  // 添加城市列表控件 左上角
        map.addControl(new BMapGL.MapTypeControl());// 地图类型 右上角显示

        var output = '驾车需要：';
        var start = new BMapGL.Point(121.187484, 31.869261);
        var end = new BMapGL.Point(121.189752, 31.86958);
        var driving = new BMapGL.DrivingRoute(map, {
            renderOptions: { map: map, autoViewport: true },
            onSearchComplete: function (results) {
                if (driving.getStatus() != BMAP_STATUS_SUCCESS) {
                    return;
                }
                var plan = results.getPlan(0);
                output += '总时长：' + plan.getDuration(true);  //获取时间
                output += '总路程：' + plan.getDistance(true);  //获取距离
                $('#result').css('display', 'block');
                $('#result').html(output);
            },
        });
        driving.search(start, end);

    </script>

</body>
</html>
